<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圆球运动</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
      }

      #container {
        position: relative;
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        border-radius: 50%;
      }

      #ball {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        background-color: red;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="ball"></div>
    </div>
    <script>
      const ball = document.getElementById("ball")
      const container = document.getElementById("container")
      let angle = 0
      let speed = 0.05 // 控制圆球运动速度

      container.addEventListener("wheel", (event) => {
        // 根据滚轮方向改变速度
        if (event.deltaY > 0) {
          speed += 0.01 // 顺时针增加速度
        } else {
          speed -= 0.01 // 逆时针减少速度
        }
      })

      function animate() {
        requestAnimationFrame(animate)

        // 更新角度
        angle += speed

        // 计算圆球的新位置
        const x = 200 + 150 * Math.cos(angle)
        const y = 200 + 150 * Math.sin(angle)

        // 移动圆球
        ball.style.transform = `translate(${x}px, ${y}px)`

        // 限制速度范围
        if (speed > 0.1) {
          speed = 0.1
        } else if (speed < -0.1) {
          speed = -0.1
        }
      }

      // 开始动画
      animate()
    </script>
  </body>
</html>
